import React from 'react';
import styles from './index.module.less';

interface AnomalyCardProps {
  type: 'red' | 'yellow' | 'green' | 'gray'; // 异常类型：红色(严重)、黄色(警告)、绿色(正常)、灰色(未知)
  code: string; // 异常代码
  name: string; // 异常名称
  location: string; // 异常位置
  description: string; // 异常描述
  updateTime: string; // 更新时间
  isHold?: boolean; // 是否搁置
  onClick?: () => void; // 点击事件
  isSelected?: boolean; // 是否被选中
  value?: number; // 实时值
  onIconClick?: () => void; // 图标点击事件
}

const AnomalyCard: React.FC<AnomalyCardProps> = ({
  type,
  code,
  name,
  value,
  location,
  updateTime,
  onClick,
  onIconClick,
  isHold,
  isSelected = false
}) => {
  let typeIcon: React.ReactNode = null;
  console.log('isHold', isHold);
  switch (type) {
    case 'red':
      typeIcon = <span className={`${styles['type-icon']} ${styles['type-icon-red']}`}/>;
      break;
    case 'yellow':
      typeIcon = <span className={`${styles['type-icon']} ${styles['type-icon-yellow']}`}/>;
      break;
    case 'green':
      typeIcon = <span className={`${styles['type-icon']} ${styles['type-icon-green']}`}/>;
      break;
  }

  // 处理图表图标点击事件，阻止事件冒泡
  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    if (onIconClick) {
      onIconClick();
    }
  };

  return (
    <div 
      className={`${styles['anomaly-card']} ${styles[`anomaly-card-${type}`]} ${isSelected ? styles['anomaly-card-selected'] : ''} ${isHold ? styles['anomaly-card-hold'] : ''}`} 
      onClick={onClick}
    >
      <div className={styles['close-icon']} onClick={handleIconClick}>
        <div className={`${styles['prohibited-icon']} ${isHold ? styles['prohibited-icon-active'] : ''}`} />
      </div>
      <div className={styles['card-header']}>
        <div className={`${styles['card-type']} ${styles[`card-type-${type}`]}`}>
          {typeIcon}
          <div className={styles['card-type-name']} title={name}>{name}</div>
        </div>
      </div>
      <div className={styles['card-content']}>
        <div className={styles['code-container']}>
          <div className={styles['code']} title={code}>
            {code}
          </div>
          <div className={`${styles['real-time-value']} ${styles[`real-time-value-${type}`]}`}>
            {value}
          </div>
        </div>
        <div className={styles['location']}>异常类型：{location}</div>
        <div className={styles['update-time']}>更新时间：{updateTime}</div>
      </div>
    </div>
  );
};

export default AnomalyCard; 